<template>
	<view class="container">
		<image class="bg-img" id="bgImg" :src="$img_path('/pagesMine/43.png')" mode="widthFix"></image>
		<view class="content">
			<view class="gz-box" @click="$refs.gz_info.open()"> 规则 </view>
			<view class="title">
				<image :src="$img_path('/pagesMine/45.png')" mode="widthFix"></image>
			</view>

			<view class="step-text"> 参与步骤 </view>
			<view class="step">
				<view class="img">
					<image class="step-i" :src="$img_path('/pagesMine/47.png')" mode="widthFix"></image>
					<image class="j-img" :src="$img_path('/pagesMine/46.png')" mode="widthFix"></image>
					<image class="step-i" :src="$img_path('/pagesMine/48.png')" mode="widthFix"></image>
					<image class="j-img" :src="$img_path('/pagesMine/46.png')" mode="widthFix"></image>
					<image class="step-i" :src="$img_path('/pagesMine/49.png')" mode="widthFix"></image>
				</view>
				<view class="text">
					<text>邀请好友</text>
					<text>好友下单并完成</text>
					<text>奖励到账</text>
				</view>
			</view>

			<!-- <view class="coupon-box">
				<view class="c-box">
					<image :src="$img_path('/pagesMine/44.png')" mode="scaleToFill"></image>
					<view class="con">
						<view class="left">
							<view class="t-1"> 你和好友各得20元优惠券 </view>
							<view class="t-2"> 领取后30天内有效 </view>
							<view class="t-2"> 满19.9减10，满99减10 </view>
						</view>
						<view class="right">
							<view class="num"> <text>20</text>元 </view>
							<view class="name"> 名称名称名称 </view>
						</view>
					</view>
				</view>
			</view> -->

			<view class="btn-box">
				<!-- <button @click="$refs.share.open()">发送邀请海报</button> -->
				<button @click="invite()">立即邀请</button>
			</view>

			<view class="my-r">
				<view class="r-title"> 我的邀请记录 </view>
				<view class="num">
					<view class="n-item">
						<view> <text>{{shareInfoss.share_user_num}}</text>人 </view>
						<text>已邀请好友</text>
					</view>
					<view class="n-item">
						<view> <text>{{shareInfoss.coupon_money}}</text>元 </view>
						<text>帮好友节省</text>
					</view>
					<view class="n-item">
						<view> <text>{{shareInfoss.coupon_num}}</text>人 </view>
						<text>已获得奖励</text>
					</view>
				</view>

				<view class="toinfo" @click="toUrl('/pagesMine/share/record')">
					<text>查看邀请记录</text>
					<image :src="$img_path('/mine/chevron_right.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<popupBox ref="gz_info" :isSlot="true" type="bottom">
			<view class="status-box return-box">
				<view class="gz-title">
					<text>规则</text>
					<image @click="$refs.gz_info.close()" :src="$img_path('/course/close_popup.png')" mode="widthFix">
					</image>
				</view>
				<view class="con" v-html="articleinfo.content">

				</view>
				<view class="return-btn">
					<button>确定</button>
				</view>
			</view>
		</popupBox>
		<!-- 海报弹窗 -->
		<popupBox ref="share" type="bottom" customClass="hbpopup" :isSlot="true">
			<view class="haibao" @click.stop="close">
				<view class="canvas_content">
					<image :src="$img_path('/pagesMine/50.png')" mode="widthFix"></image>
				</view>

				<view class="shareBox hb_b" @click.stop>
					<view class="title">
						<text>分享至</text>
						<!-- <image src="@/static/image/login_1.png" @click="$refs.haibao.close()" mode="widthFix"></image> -->
					</view>
					<view class="box">
						<!-- <view class="item" @click="saveCanvasImg()">
							<image :src="$img_path('/pagesMine/53.png')" mode="widthFix"></image>
							<text>保存图片</text>
						</view> -->
						<view class="item" @click="shareClick('WXSceneSession')">
							<image :src="$img_path('/pagesMine/51.png')" mode="widthFix"></image>
							<text>微信好友</text>
							<!-- #ifdef MP-WEIXIN -->
							<button open-type="share"></button>
							<!-- #endif -->
						</view>
						<view class="item" @click="shareClick('WXSceneTimeline')">
							<image :src="$img_path('/pagesMine/52.png')" mode="widthFix"></image>
							<text>朋友圈</text>
						</view>
					</view>
					<view class="btn">
						<!-- <button @click="$refs.haibao.close()">取消</button> -->
					</view>
				</view>
			</view>
		</popupBox>
		<view class="jiantou" v-if="pengyouquan" @click="pengyouquan = false">
			<image :style="{ top: 5 + 'px', right: jWidth + 'px' }" :src="$img_path('/course/jian.png')"
				mode="widthFix"></image>
			<view class="text"> 请点击这里 </view>
		</view>
	</view>
</template>

<script>
	import {
		article
	} from '@/utils/api/index.js'
	import popupBox from "@/components/popup/popup.vue";
	import {
		shareInfo
	} from "@/utils/api";
	export default {
		components: {
			popupBox,
		},
		data() {
			return {
				pengyouquan: false, //分享朋友圈
				jWidth: this.jWidth - 30,
				articleinfo: {},
				shareInfoss:{}
			};
		},
		onLoad() {
			this.getShareInfo()
			this.articless()
		},
		onShow() {},

		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: "邀请好友送优惠", //分享的标题
				imageUrl: this.$img_path('/pagesMine/50.png'), //展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
				path: "/pages/login/login?invitCode=" + JSON.parse(uni.getStorageSync("userInfo"))
					.invit_code, //点击链接后跳转的页面，可以带参数
			};
		},
		// 分享到好友
		onShareAppMessage(res) {
			return {
				title: "邀请好友送优惠", //分享的标题
				imageUrl: this.$img_path('/pagesMine/50.png'), //展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
				path: "/pages/login/login?invitCode=" + JSON.parse(uni.getStorageSync("userInfo"))
					.invit_code, //点击链接后跳转的页面，可以带参数
			};
		},
		methods: {
			async articless(type) {
				const {
					code,
					data
				} = await article({
					biaoshi: '分享规则'
				})
				if (code == 1) {
					this.articleinfo = data
					console.log(this.articleinfo.content)
				}
			},
			async getShareInfo() {
				console.log(JSON.parse(uni.getStorageSync("userInfo")).invit_code);

				const {
					code,
					data
				} = await shareInfo()
				if (code == 1) {
					this.shareInfoss = data
				}
			},
			shareClick(type) {
				if (type == "WXSceneTimeline") {
					this.pengyouquan = true;
				}
			},

			toUrl(url) {
				uni.navigateTo({
					url,
				});
			},

			close() {
				this.$refs.share.close();
			},

			saveCanvasImg() {
				if (uni.getSystemInfoSync().platform === "h5") {
					uni.showToast({
						title: "H5平台不支持保存图片",
						icon: "none",
					});
					return;
				}
				uni.downloadFile({
					url: this.$img_path("/pagesMine/50.png"),
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功",
									icon: "none",
								});
							},
						});
					},
				});
			},
			// 立即邀请
			invite() {
				this.$refs.share.open();
			},
			// 分享给微信好友
			shareClick(type) {
				if (type == "WXSceneTimeline") {
					this.pengyouquan = true;
				}
			},
			// 分享到朋友圈
			shareClick2(type) {
				if (type == "WXSceneTimeline") {
					this.pengyouquan = true;
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		&>.bg-img {
			width: 100%;
			height: auto;
		}

		.content {
			position: absolute;
			top: 0%;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			padding: 0 22rpx;
			box-sizing: border-box;

			.gz-box {
				width: 134rpx;
				height: 60rpx;
				border-radius: 42rpx 0rpx 0rpx 42rpx;
				background-color: #fbd9c6;
				font-weight: 400;
				font-size: 32rpx;
				color: #ce5925;
				line-height: 60rpx;
				text-align: center;
				position: absolute;
				right: 0;
				top: 64rpx;
			}

			.title {
				image {
					width: 81.07%;
					height: auto;
					margin: 0 auto;
					position: absolute;
					top: 140rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			.step-text {
				position: absolute;
				width: calc(100% - 44rpx);
				top: 770rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 44rpx;
				text-shadow: 0px 6px 12px #d42a00;
				text-align: center;
			}

			.step {
				position: absolute;
				width: calc(100% - 44rpx);
				background: #ffffff;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				padding: 28rpx 80rpx 54rpx;
				box-sizing: border-box;
				top: 836rpx;

				.img {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.step-i {
						width: 94rpx;
						height: 94rpx;
					}

					.j-img {
						width: 60rpx;
						height: 27rpx;
					}
				}

				.text {
					display: flex;
					justify-content: space-between;
					padding-top: 12rpx;

					text {
						font-weight: 400;
						font-size: 26rpx;
						color: #878787;
						line-height: 36rpx;
					}
				}
			}

			.coupon-box {
				position: absolute;
				width: calc(100% - 44rpx);
				top: 1080rpx;

				.c-box {
					width: 100%;
					height: 240rpx;
					position: relative;

					&>image {
						width: 100%;
						height: 100%;
					}

					.con {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						right: 0;
						display: flex;
						justify-content: space-between;

						.left {
							padding: 48rpx 0 0 24rpx;
							box-sizing: border-box;

							.t-1 {
								font-weight: bold;
								font-size: 32rpx;
								color: #ffffff;
								line-height: 44rpx;
							}

							.t-2 {
								font-weight: 400;
								font-size: 28rpx;
								color: #ffffff;
								line-height: 40rpx;
								margin-top: 12rpx;
							}
						}

						.right {
							padding: 42rpx 24rpx 0 0;
							display: flex;
							flex-direction: column;
							align-items: center;

							.num {
								font-weight: 800;
								font-size: 36rpx;
								color: #ffffff;
								line-height: 96rpx;

								text {
									font-size: 80rpx;
								}
							}

							.name {
								font-weight: 400;
								font-size: 32rpx;
								color: #ffffff;
								line-height: 44rpx;
							}
						}
					}
				}
			}

			.btn-box {
				position: absolute;
				width: calc(100% - 44rpx);
				top: 1148rpx;
				display: flex;
				justify-content: center;

				button {
					width: 630rpx;
					height: 96rpx;
					background: #fee8be;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					border: 2rpx solid #fe8d3d;
					font-weight: 400;
					font-size: 36rpx;
					color: #fe6f3f;
					line-height: 96rpx;
				}
			}

			.my-r {
				width: calc(100% - 44rpx);
				position: absolute;
				top: 1272rpx;
				background: #ffffff;
				border-radius: 28rpx;
				padding: 0 22rpx 0 26rpx;
				box-sizing: border-box;

				.r-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					padding-top: 26rpx;
				}

				.num {
					padding: 46rpx 38rpx 26rpx 34rpx;
					border-bottom: 2rpx solid #eeeeee;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;

					.n-item {
						display: flex;
						flex-direction: column;
						align-items: center;

						&>view {
							font-weight: 800;
							font-size: 32rpx;
							color: #333333;
							line-height: 84rpx;

							text {
								font-size: 60rpx;
							}
						}

						&>text {
							font-weight: 400;
							font-size: 28rpx;
							color: #918e8e;
							line-height: 40rpx;
						}
					}
				}

				.toinfo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 22rpx 28rpx 26rpx;
					box-sizing: border-box;

					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}

	.status-box {
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));

		.gz-title {
			padding: 38rpx 0 0;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				font-weight: bold;
				font-size: 38rpx;
				color: #333333;
				line-height: 52rpx;
			}

			&>image {
				position: absolute;
				top: 48rpx;
				right: 30rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.con {
			padding: 24rpx 22rpx 44rpx;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 28rpx;
			color: #858585;
			line-height: 40rpx;
		}

		&.return-box {
			padding-bottom: 0 !important;

			.return-btn {
				padding: 12rpx 22rpx 20rpx;
				box-sizing: border-box;

				// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0,0,0,0.05);
				button {
					width: 100%;
					height: 96rpx;
					background: linear-gradient(135deg, #ffa233 0%, #fb4c4c 100%);
					border-radius: 80rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 96rpx;
				}
			}
		}
	}

	.shareBox {
		padding: 40rpx 0 0;
		background: #ffffff;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 30rpx;
				top: 0;
			}
		}

		.box {
			padding: 70rpx 30rpx 38rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 88rpx;
					height: 88rpx;
				}

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					// margin-top: 20rpx;
					text-align: center;
				}

				position: relative;

				button {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					opacity: 0;
				}
			}
		}

		&.coupon {
			background-color: #ffffff;
		}

		.coupon-box {
			padding: 70rpx 30rpx 38rpx;

			.item {
				width: 100%;
				height: 186rpx;
				position: relative;

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}

				&>image.bg {
					width: 100%;
					height: 100%;
				}

				.c_num {
					position: absolute;
					left: 40rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: center;

					.price {
						font-weight: bold;
						font-size: 48rpx;
						color: #fd845c;
						line-height: 66rpx;

						text {
							font-size: 30rpx;
						}
					}

					&>text {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 8rpx;
					}
				}

				.c_info {
					position: absolute;
					left: 204rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.xz {
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						line-height: 32rpx;
					}

					.c_box {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 6rpx;
					}

					.time {
						font-weight: 400;
						font-size: 20rpx;
						color: #ff575b;
						line-height: 28rpx;
						margin-top: 18rpx;
					}
				}

				.checkImg {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 116rpx;
					height: 48rpx;
				}
			}
		}

		.btn {
			padding: 32rpx 30rpx;
			// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
			// background: #FFFFFF;

			button {
				width: 100%;
				height: 96rpx;
				background: linear-gradient(90deg, #ffa233 0%, #fb4c4c 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 96rpx;
			}
		}
	}

	.haibao {
		.canvas_content {
			width: 520rpx;
			height: auto;
			background: #ffffff;
			box-sizing: border-box;
			// background-color: #F5F5F5;
			border-radius: 20rpx;
			margin: 0 auto 128rpx;

			&>image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.hb_b {
			background-color: #ffffff;
			border-radius: 16rpx 16rpx 0 0;

			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));
		}
	}

	.jiantou {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;

		image {
			width: 300rpx;
			height: 400rpx;
			position: absolute;
		}

		view {
			position: absolute;
			top: 500rpx;
			right: 300rpx;
			color: #ff0000;
			font-size: 48rpx;
			font-weight: bold;
		}
	}

	/deep/ .hbpopup {
		background-color: transparent !important;
		padding-bottom: 0 !important;
	}
</style>